<template>
  <view class="p-h24 p-v20">
    <view class="p-v20">
      <text class="text-700-130">共 {{ list.length }} 条</text>
    </view>
    <view class="bg-1 p-h20 list">
      <view v-if="list.length === 0" class="p-v80">
        <up-empty mode="list" />
      </view>
      <template v-else>
        <view v-for="item in list" :key="item.id" class="flex p-v20 item">
          <image class="img" :src="genStaticUrl(item.avatar)" mode="aspectFill" />
          <view class="m-l20 flex-1">
            <view class="flex-sb">
              <text class="text-700-132">{{ item.nickname }}</text>
              <text v-if="item.job.length > 0" class="text-700-532">{{ item.job[0].position }}</text>
            </view>
            <view class="flex-sb m-t10">
              <text class="text-400-326">女 | {{ item.highest_education }} | {{ item.work > 0 ? `${item.work}年工作经验` : '无经验' }} | 全职</text>
              <text class="text-400-326">5分钟前</text>
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import type { TResume } from '@/types/api.d'
  import { useRequest } from '@/hooks/use-request'
  import { genStaticUrl } from '@/utils/utils'

  const { data: list } = useRequest(() => uni.$u.get<TResume[]>('/resume/sclst'), [], { showLoading: true })
</script>

<style lang="scss">
	page {
		background-color: $page-color-4;
	}
</style>

<style lang="scss" scoped>
	.list {
		border-radius: 10rpx;
	}
	.item {
		position: relative;
		.img {
			width: 107rpx;
			height: 107rpx;
			border-radius: 10rpx;
		}
	}
	.item + .item {
		&::before {
			@include hairline-top;
		}
	}
</style>
